<template>
    <div class="common-layout">
        <el-container style="height: 100vh; flex-direction: column;">
            <!-- 顶部导航栏 -->
            <el-header style="flex-shrink: 0;" class="common-header">
                <TopNav />
            </el-header>
            <el-container style="flex: 1; overflow: auto;">
                <el-aside width="200px" style="flex-shrink: 0;margin: 2px 8px;">边栏展示</el-aside>
                <el-main style="padding: 5px">
                    <!-- 轮播图 -->
                    <Carousel />
                    <!-- 公告栏 -->
                    <Announcement style="margin-top: 2px;" />
                    <!-- 图书资讯 -->
                    <BookInfo style="margin-top: 2px;" />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import TopNav from '@/components/HomeLayout/TopNav.vue';
import Carousel from '@/components/HomeLayout/Carousel.vue';
import Announcement from '@/components/HomeLayout/Announcement.vue';
import BookInfo from '@/components/HomeLayout/BookInfo.vue';


</script>

<style scoped>
.common-layout {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: pink;
}

.common-header {
    background-color: burlywood;
    height: 70px;
}
</style>